<template>
	<block>
		<List :listDatas="listDatas" @list:click="toOrderDetail">
			<template v-slot="{ item }">
				<view class="order">
					<!-- 订单状态和时间 -->
					<view class="order-state">
						<view class="flex flex-y-center">
							<Tag tagName="旗舰"
								customBackground="linear-gradient(180deg, #422A01 0%, #838383 0.01%, #2D251C 100%)">
							</Tag>
							<view class="f-w">{{ item.order.tenantName }}</view>
						</view>
						<view class="flex flex-y-center">
							<view>{{ item.order.flowState }}</view>
							<uni-icons type="forward" size="13"></uni-icons>
						</view>
					</view>
					<!-- 商品详情 -->
					<block v-for="(goods, index) in item.items" :key="index">
						<view class="order-goods">
							<view class="flex">
								<view class="goods-image">
									<sl-image :value="goods.productImage"></sl-image>
								</view>
								<view class="flex">
									<view class="flex-column">
										<view class="">{{ goods.productName }}：</view>
										<view class="f-tip py-1">共{{ goods.quantity }}件</view>
									</view>
								</view>
							</view>
							<Money :priceValue="goods.productPrice" :activeClass="['money-normal']"></Money>
						</view>
					</block>
					<!-- 订单操作 -->
					<view class="flex flex-x-end p-a bottom-0 right-0">
						<Operate :orderId="item.order.id" :cancelAble="item.cancelAble" :paymentAble="item.paymentAble"
							:refundAble="item.applyRefundAble" :returnAble="item.applyReturnAble"
							:receiptAble="item.receiptAble" @onCancel:result="onCancel" @onPay:result="onPay"
							@onRefund:result="onRefund" @onReturn:result="onReturn" @onReceipt:result="onReceipt">
						</Operate>
					</view>
				</view>
			</template>
		</List>
	</block>
</template>

<script>
	import Constants from '@/constants';
	import Money from '@/pages/components/money/money.vue';
	import List from '@/pages/components/list/list.vue';
	import Operate from '@/pages/components/order/operate/operate.vue';
	import Tag from '@/pages/components/tag/tag.vue';
	//订单组件
	//@group 业务组件
	export default {
		//
		name: 'order',
		//
		mixins: [Constants],
		//
		components: {
			List,
			Money,
			Operate,
			Tag
		},
		//
		data() {
			return {};
		},
		//
		props: {
			//跳转页
			targetPage: {
				type: String,
				default: ''
			},
			//订单集合
			listDatas: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		//
		methods: {
			//取消订单
			onCancel(flag) {
				this.$emit('onCancel:result', flag);
			},
			//支付订单
			onPay(result) {
				this.$emit('onPay:result', result);
			},
			//申请退款
			onRefund(flag) {
				this.$emit('onRefund:result', flag);
			},
			//申请退货
			onReturn(flag) {
				this.$emit('onReturn:result', flag);
			},
			//确认收货
			onReceipt(flag) {
				this.$emit('onReceipt:result', flag);
			},
			//跳转订单详情页
			toOrderDetail(item) {
				const params = {
					orderId: item.order.id
				};
				this.toTargetPage(this.pages.orderDetailPage, params);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.order {
		font-size: $uni-font-size-base;
		height: 300rpx;
		position: relative;

		.order-state {
			display: flex;
			justify-content: space-between;
			padding-top: 24rpx;
		}

		.order-goods {
			display: flex;
			justify-content: space-between;
			padding-top: 24rpx;

			.goods-image {
				position: relative;
				width: 128rpx;
				height: 128rpx;
				overflow: hidden;
				background: $uni-bg-color;
				margin-right: 20rpx;
			}
		}
	}
</style>